<template>
  <common-list-group>
    <div slot="group" class="group-list-component-wrap">
      <common-tree
        ref="treeRef"
        specialUse="API"
        :is-slot="true"
        :isRequest="isRequest"
        :treeLoading="treeLoading"
        :tree-data="applitionTreeData"
        :defaultExpandAll="false"
        :defaultExpandedKeys="defaultExpandedKeys"
        :tree-prop="{
          label: 'orgName',
        }"
        is-show-icon-for-no-child
        searchForChildren
        search-placeholder="查询分组或者业务系统"
        :current-node-key="currentNodeKey"
        nodeKey="orgId"
        set-node-by-key="isLeaf"
        special-use="API"
        @handleNodeExpand="handleNodeExpand"
        @handleNodeClick="handleTreeNodeClick"
      >
        <div slot-scope="{ scope }" class="tree-item-wrap">
          <common-carousel-text :content="scope.data.orgName" :font-size="14" />
          <!-- <el-popover
            v-if="
              scope.data.type !== '2' &&
              (scope.data.isDefault !== '1' || scope.node.level === 1) &&
              (scope.data.type === '0' ||
                (scope.node.level > 1 &&
                  (isAdmin || scope.data.createBy === name)))
            "
            popper-class="chart-type-list-popover"
            placement="right-start"
            width="150"
            trigger="hover"
          >
            <commonIcon
              iconName="icon-more"
              slot="reference"
              iconType="icon"
              :iconSize="16"
            ></commonIcon>
            <common-menu>
              <common-menu-item
                v-if="scope.data.type === '0'"
                @click="addType(scope.data)"
                >新增子分类
              </common-menu-item>
              <div v-if="isAdmin || scope.data.createBy === name">
                <common-menu-item
                  v-if="scope.data.type === '0'"
                  @click="addApplication(scope.data)"
                  >业务系统管理
                </common-menu-item>
                <common-menu-item
                  v-if="scope.data.type === '0'"
                  @click="editType(scope.data)"
                  >重命名
                </common-menu-item>
                <common-menu-item
                  v-if="scope.node.level > 1 && scope.data.type !== '2'"
                  @click="handleDeleteTree(scope.data)"
                  >{{ scope.data.type === "0" ? "删除" : "解绑" }}
                </common-menu-item>
              </div>
            </common-menu>
          </el-popover> -->
        </div>
      </common-tree>
    </div>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="45px"
      >
        <el-form-item label="接口" prop="url">
          <common-input
            :verify="false"
            v-model="queryParams.url"
            @enter="handleQuery"
            clearable
            :maxlength="256"
          />
        </el-form-item>
      </el-form>
    </common-search>
    <common-table v-loading="loading" slot="content" :data="list">
      <el-table-column label="接口" prop="url" show-overflow-tooltip />
      <el-table-column
        label="安全得分"
        prop="securityScore"
        show-overflow-tooltip
      />
      <el-table-column label="操作" align="left" width="135px">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleReports(scope.row)"
            v-hasPermi="['apisecurity:securityreport:view']"
            >查看报告
          </el-button>
          <el-button
            type="text"
            @click="handleHistory(scope.row)"
            v-hasPermi="['apisecurity:securityreport:history']"
            >历史报告</el-button
          >
        </template>
      </el-table-column>
    </common-table>

    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Reports
      ref="reports"
      v-if="isReports"
      @close="closeReports"
      :reportId="reportId"
    ></Reports>
    <History
      ref="history"
      v-if="isHistory"
      @close="closeHistory"
      :reportId="reportId"
    ></History>
    <!-- 应用 多选弹窗 -->
    <!-- <choose-multiple ref="chooseMultiple" @refresh="refresh"></choose-multiple> -->

    <!-- 新增/编辑子分类弹窗 -->

    <!-- <common-edit-dialog
      :title="`${isTypeEdit ? '重命名' : '新增子分类'}`"
      :visible="isTypeDialog"
      :button-loading="dialogLoading"
      @cancel="cancelTypeForm"
      @submit="submitTypeForm"
      width="25%"
    >
      <el-form
        ref="typeForm"
        :model="typeForm"
        :rules="typeRule"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="分类名称" prop="orgName">
          <common-input
            :maxlength="20"
            v-model="typeForm.orgName"
          ></common-input>
        </el-form-item>
      </el-form>
    </common-edit-dialog> -->
  </common-list-group>
</template>

<script>
import { getPageRealTimeList } from "@/api/apisecurity/report";
import BaseList from "@/mixins/BaseList";
import Index from "../apiinterface/mixin/index";
import Reports from "./components/reports";
import History from "./components/history";
import commonIcon from "@/components/CommonIcon";
import ChooseMultiple from "../apiinterface/components/chooseMultiple.vue";
import { mapGetters } from "vuex";
export default {
  components: { Reports, History, commonIcon, ChooseMultiple },
  mixins: [BaseList, Index],
  props: {},
  computed: {
    ...mapGetters(["isAdmin", "name"]),
  },
  data() {
    return {
      isRequest: false,
      treeLoading: true,
      deptSelect: [],
      treeProp: {
        // 树参数
        children: "children",
        label: "label",
        disabled: false,
      },
      currentNodeKey: "",
      list: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        url: "",
      },
      applitionTreeData: [],
      isReports: false,
      isHistory: false,
      orgId: "",
      systemId: "",
      reportId: "",
    };
  },
  watch: {},

  methods: {
    getList() {
      this.loading = true;
      const params = Object.assign({}, this.queryParams, {
        url: this.queryParams.url,
        orgId: this.orgId,
        businessSystemId: this.businessSystemId,
        aplManageId: this.appId,
      });
      getPageRealTimeList(params)
        .then((res) => {
          if (res && res.code === 200) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
    },

    handleReports(row) {
      this.isReports = true;
      this.reportId = row.id;
    },
    handleHistory(row) {
      this.isHistory = true;
      this.reportId = row.interfaceId;
    },
    closeHistory() {
      this.isHistory = false;
    },
    closeReports() {
      this.isReports = false;
    },
  },
  created() {
    this.getApplicationList();
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.tree-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;

  &:hover {
    .iconfont {
      opacity: 1;
    }
  }

  .iconfont {
    opacity: 0;
    transition: opacity 0.15s linear;
  }
}
</style>
